<template>
    <div class="board">
      <div class="left">
      <course-panel 
      v-for="({name},key) in data.courses" 
      :course-name="name"
      :course-key="key"
      @handle-drag-end="handleDragEnd"
      >
    
      </course-panel>
      </div>
      <div class="right"
      @dragover="handleDragOver"
      @dragenter="handleDragEnter"
      
      >
      <table border="1">
      <tr>
        <th>时间段/星期</th>
        <th v-for="(weekday,index) of data.weekdays" :key="index">{{weekday}}</th>
      </tr>
    
      <tr  v-for="(timeSlot,index) of data.time_slot" 
      :key="index">
        <th class="time_slot">{{ timeSlot }}</th>
        <td 
        v-for="weekday in 7"
        :data-weekday="weekday"
        :data-time-slot="index"
        >
        <template v-if="cellData[`${weekday}-${index}`]">
          <course-panel 
        :course-name="data.courses[cellData[`${weekday}-${index}`]].name"
        :course-key="cellData[`${weekday}-${index}`]"
        v-course-panel="{
          cellData,
          weekday,
          timeSlot:index
    
        }"
        >
        </course-panel>
        </template>
      
        </td>
      </tr>
      </table>
      </div>
    </div>
    </template>
    
    <script setup>
    import {ref} from 'vue'
    import CoursePanel from "./components/CoursePanel";
    import vCoursePanel from "./components/CoursePanel/vCoursePanel.jsx";
    const data ={
        weekdays:[
            "星期一",
            "星期二",
            "星期三",
            "星期四",
            "星期五",
            "星期六",
            "星期日"
        ],
        time_slot:[
            "08:00-8:50",
            "09:00-9:50",
            "10:00-10:50",
            "11:00-11:50",
            "12:00-12:50",
            "13:00-13:50",
            "14:00-14:50",
            "15:00-15:50",
            "16:00-16:50",
            "17:00-17:50",
        ],
        courses:{
            chinese:{
                name:'语文',
                teachers:["张三","李四"],
            },
            math:{
                name:'数学',
                teachers:["王五","赵六"],
            },
            english:{
                name:'英语',
                teachers:["陈七","孙八"],
            }    
        }
    }
    /**
     * weekday 列
     * timeslot 行
     * 
     *  {
     *  1-5:chinese / english / math 定位单元格
     * }
     */
    
    const cellData = ref({
      '1-1':'chinese',
      '2-5':'math',
      '3-3':'english',
    
    })
    let targetCell = null
    
    function handleDragOver(e) {
      e.preventDefault();// 默认行为回来动作去掉  我们不是放入的拖动数据，而是拖动数据进入的区域，我们不希望有默认行为
      
    }
    function handleDragEnter(e) {
      e.preventDefault();
      const tar = e.target
      const tagName= tar.tagName.toLowerCase()
    
      targetCell = tagName !== 'td' ? null : tar
      
    }
    function handleDragEnd(target) {
      console.log(target);
      if(targetCell){
        const weekday = targetCell.dataset.weekday
        const timeslot = targetCell.dataset.timeslot
        const prop = `${weekday}-${timeslot}`
    
        if(!cellData.value[prop]){
          const key =target.dataset.key
          cellData.value[prop] = key
        }
      }
    }
    </script>
    
    
    
    <style scoped>
    .board{
      position: relative;
      .left{
        position: absolute;
        left: 0;
        top: 0;
        width: 300px;
        height: 100%;
      }
      .right{
        width:100%;
        height: 800px;
        padding-left: 300px;
        box-sizing: border-box;
        table{
          width: 100%;
          height: 100%;
          border-collapse: collapse;
          table-layout: fixed;
    
          td{
           height: 100px;
          }
        }
      }
    }
    </style>
    